import React, { FC, useState, useEffect } from 'react'
import { Button, Col, message, Modal, Row, Tabs } from 'antd'

import { getUserInfo } from '~/mock/user/userinfo'
import TopHeader, { ListTitle } from '~/components/top-header'

import { voucherRecord, obtainVoidCertificate } from '~/api/query-api'
import { queryCertificate } from '~/api/approve-api'

import WaitingList from './container/waiting-list'
import MovedList from './container/moved-list'
import { useNavigate, useLocation } from 'react-router-dom'
import { batchGetTmpHttpUrl } from '~/api/store-file-api'
import ItemModal from '~/components/item-modal'
import { FooterAction } from '~/pages/property-management-page/handle-property-detail/styled'

const { TabPane } = Tabs

const PropertyInvolved: FC = () => {
  const [waitCastItems, setWaitCastItems] = useState([])
  const [moveListItems, setMoveListItems] = useState([])
  const [imgList, setImgList] = useState([])
  const [visible, setVisible] = useState(false)
  const [modalVisible, setModalVisible] = useState(false)
  const navigate = useNavigate()
  const { state, pathname }: any = useLocation()
  console.log('state', state)

  const { caseCompanyName, caseDepartmentName, caseName, caseNo, activeKey = '1' } = state || { activeKey: '1' }

  const handleGetueryWaitCastItems = async () => {
    const userInfo = getUserInfo()
    const { data } = await voucherRecord({
      ...userInfo,
      sortOrder: 1,
      caseName,
      caseNo
    })
    setWaitCastItems(data)
  }
  const handleGetVoidCertificate = async () => {
    const userInfo = getUserInfo()
    const { data } = await obtainVoidCertificate({
      ...userInfo,

      caseName,
      caseNo
    })
    setMoveListItems(data)
  }

  const onClickViewCertificate = async (voucherId: any) => {
    if (!voucherId) return message.info('无相关凭证')
    const { data } = await queryCertificate({ voucherId })
    console.log('borrowVoucherId', data)
    window.open(data)
  }
  const onClickViewItem = async (record: any) => {
    if (!record.ItemPic || !JSON.parse(record.ItemPic).length) return message.info('无相关物品')
    const storeIds = JSON.parse(record.ItemPic).map((item: any) => item.storeId)
    const res = await batchGetTmpHttpUrl(storeIds)
    setImgList(res.data)
    setVisible(true)
    // const { data } = await queryCertificate({ voucherId })
    // console.log('borrowVoucherId', data)
    // window.open(data)
  }
  const onClickViewUser = async (record: any) => {
    if (!record.userPics || !JSON.parse(record.userPics).length) return message.info('无相关人员')
    const storeIds = JSON.parse(record.userPics).map((item: any) => item.storeId)
    const res = await batchGetTmpHttpUrl(storeIds)
    setImgList(res.data)
    setVisible(true)
    // const { data } = await queryCertificate({ voucherId })
    // console.log('borrowVoucherId', data)
    // window.open(data)
  }
  const onClickViewInstrument = async (record: any) => {
    if (!record.docs || !JSON.parse(record.docs).length) return message.info('无相关文书')
    const storeIds = JSON.parse(record.docs).map((item: any) => item.storeId)
    const res = await batchGetTmpHttpUrl(storeIds)
    setImgList(res.data)
    setVisible(true)
    // const { data } = await queryCertificate({ voucherId })
    // console.log('borrowVoucherId', data)
    // window.open(data)
  }

  useEffect(() => {
    console.log('666')
    handleGetueryWaitCastItems()
    handleGetVoidCertificate()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const headData = [
    {
      childen: [
        {
          label: '案件编号:',
          value: caseNo
        },
        { label: '案件名称:', value: caseName }
      ]
    },
    {
      childen: [
        { label: '办案单位:', value: caseCompanyName },
        { label: '办案部门:', value: caseDepartmentName }
      ]
    }
  ]

  return (
    <div>
      <TopHeader headData={headData} />
      <ListTitle title="台账列表" />
      <main style={{ marginTop: 21 }}>
        <Tabs
          activeKey={activeKey}
          onChange={(activeKey: string) => {
            navigate(pathname, { replace: true, state: { ...state, activeKey } })
          }}
        >
          <TabPane tab={<span>凭证列表</span>} key="1">
            <WaitingList
              onClickViewInstrument={onClickViewInstrument}
              onClickViewUser={onClickViewUser}
              onClickViewItem={onClickViewItem}
              onClickViewCertificate={onClickViewCertificate}
              waitCastItems={waitCastItems}
            />
          </TabPane>
          <TabPane tab={<span>已作废凭证</span>} key="2">
            <MovedList moveListItems={moveListItems} />
          </TabPane>
        </Tabs>
      </main>
      <Modal
        footer={null}
        onCancel={() => {
          setVisible(false)
        }}
        width={'max-content'}
        visible={visible}
      >
      <Row>
        {imgList.map((item: any, index: number) => (
          <Col span={12} key={index} style={{ padding: 24 }}>
            <img style={{ width: 300 }} src={item.tmpHttpUrl} />
          </Col>
        ))}
      </Row>
      </Modal>
      <FooterAction>
      <div >
        <Button  onClick={() => navigate(-1)}>返回</Button>
      </div>
      </FooterAction>
    </div>
  )
}

export default PropertyInvolved
